<template>
	<view class="accountCancellation">
		<view class="text-c">
			<image class="icon-tip" src="/pagesA/static/img/setting/icon-tip.png" mode=""></image>
			<view class="font-s-16 fw-b mar-t-12">账号注销重要提示</view>
		</view>
		<view class="tips-content">
			<view class="fw-b line-height-44">注销前请认真阅读以下内容。账号一旦注销，您讲无法使用该账号，包括但不限于：</view>
			<view class="color-666" style="margin: 40rpx 0;">
				<view class="line-height-44">1、无法登录、使用度小花账号，并移除该账号下所有绑定的登录方式；</view>
				<view class="line-height-44">2、账号重置为默认头像、昵称重置为“用户已注销”；</view>
				<view class="line-height-44">3、移除该账号下的所有认证身份，且无法恢复；</view>
				<view class="line-height-44">4、该账号下的个人资料和历史信息等都无法找回。</view>
			</view>
			<view class="fw-b line-height-44">注销申请条件</view>
			<view class="color-666" style="margin-top: 40rpx;">
				<view class="line-height-44">1、账号处于正常状态，账号没有被盗、被封等风险；</view>
				<view class="line-height-44">2、没有正在使用中的商业产品、业务等。</view>
			</view>
			<view style="margin-top: 40rpx;" class="fw-b line-height-44">账号注销是不可恢复操作，操作之前，请先确保度小花账号内所有服务均已妥善处理。如因注销账号造成的损失由用户自行承担。</view>
		</view>
		<view class="cancellation-footer">
			<view style="margin-bottom: 24rpx;">
				<u-checkbox v-model="isAgree" active-color="#3392FF" :size="32"><view class="font-s-13 line-height-40">我确认已阅读并了解以上信息，且自愿放弃账号内全部数据、权益资产及服务</view></u-checkbox>
			</view>
			<view >
				<u-button shape="circle" :class="{'btn-disabled':btnDisabled}" :disabled="btnDisabled" @click="confirmShow=true" :custom-style="{height:'90rpx',fontSize: '32rpx',fontWeight: 'bold',background: '#3392FF',color:'#fff',letterSpacing: '8rpx'}" type="primary">确认注销<text v-if="time">（{{time}}S）</text></u-button>
			</view>
		</view>
		<!-- 温馨提醒 -->
		<confirm-tips-popup :visible.sync="confirmShow" @confirm="confirm()">
			<view class="line-height-44">请再次确定是否注销账号，账号注销后，将会删除账号的全部数据，永久无法找回，请谨慎操作！</view>
		</confirm-tips-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				time:10,
				isAgree: false,
				timeInterval:null,
				confirmShow:false
			}
		},
		computed:{
			btnDisabled(){
				return !this.isAgree || this.time>0
			}
		},
		onLoad() {
			this.timeInterval = setInterval(()=>{
				this.time--
				if(this.time==0){
					clearInterval(this.timeInterval)
				}
			},1000)
		},
		onUnload() {
			clearInterval(this.timeInterval)
		},
		methods: {
			confirm(){
				this.confirmShow = false
				uni.showLoading({
					mask:true,
					title:'正在注销'
				})
				this.$request({
					url: '/loginUserInfo/cancelUser',
					method: 'post',
					data: {}
				}).then(res => {
					if(res.code===200){
						uni.showToast({
							title: '注销成功',
							icon: 'none'
						})
						uni.removeStorageSync('token')
						uni.removeStorageSync('userInfo')
						uni.removeStorageSync('recommendUserId')
						uni.removeStorageSync('channelId')
						setTimeout(()=>{
							uni.reLaunch({
								url: '/pages/login'
							})
						},1200)
					}
				})
			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.accountCancellation {
		padding: 80rpx 24rpx 290rpx;
		font-size: 28rpx;
		padding-bottom: calc(290rpx + constant(safe-area-inset-bottom)) !important;///兼容 IOS<11.2/
		padding-bottom: calc(290rpx + env(safe-area-inset-bottom)) !important;///兼容 IOS>11.2/
		.icon-tip{
			width: 88rpx;
			height: 88rpx;
		}
		.tips-content{
			margin-top: 80rpx;
		}
		.cancellation-footer{
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			background: #FFFFFF;
			box-shadow: 0px -4rpx 10rpx 0px rgba(0,0,0,0.03);
			padding: 24rpx;
			padding-bottom: calc(24rpx + constant(safe-area-inset-bottom)) !important;///兼容 IOS<11.2/
			padding-bottom: calc(24rpx + env(safe-area-inset-bottom)) !important;///兼容 IOS>11.2/
			z-index: 99;
			.u-checkbox{
				align-items: flex-start;
				::v-deep.u-checkbox__label{
					margin-top: -2rpx;
				}
			}
			.btn-disabled{
				opacity: 0.5;
			}
		}
	}
</style>
